<template>
  <div style="width: 100%;">
    <el-progress
        :percentage="percentage || 0"
        :status="percentage >= 100 ? 'success' : ''"
        :stroke-width="12"
        :format="(percentage) => percentage + '%'"
        class="progress-bar"
    />
  </div>
</template>

<script setup>
defineProps({
  percentage: {
    type: Number,
    default: 0
  }
})
</script>

<style scoped>
.progress-bar {
  margin: 0;
  display: flex;
  align-items: center;
  width: 150px;
}

:deep(.el-progress__text) {
  font-size: 12px !important;
  min-width: 30px !important;
  margin-left: 5px !important;
  color: #606266;
}

:deep(.el-progress-bar__outer) {
  border-radius: 10px;
  background-color: #F0F2F5;
}

:deep(.el-progress-bar__inner) {
  border-radius: 10px;
  background: #409EFF;
  transition: all 0.3s ease;
}

:deep(.el-progress) {
  width: 100%;
}

:deep(.el-progress__text) {
  color: #606266;
  font-weight: 500;
}
</style>
